<template>
  <div class="page">
    <!-- banner 区域 -->
    <Banner class="page-banner" :skeletonLoading="skeletonLoading" />
    <!-- hotsellplatform 区域 -->
    <hot-sell-platform class="page-hot" />
    <!-- Recommended Product 区域 -->
    <div class="page-recommended">
      <recommended-product
        :recommendList="recommendList"
        :showAddLoading="showAddLoading"
        :addCount="pageData.pageSize"
      >
        <template #header>
          <!-- 插槽内容需要手动添加骨架屏 -->
          <template v-if="!skeletonLoading">
            <div class="header">
              <div class="header-title">
                <img :src="recommendImg" alt="" />
                <span style="margin-left: 3px">Recommended Products</span>
              </div>
            </div>
          </template>
          <template v-else>
            <div class="header">
              <el-skeleton animated>
                <template #template>
                  <div class="header-box">
                    <el-skeleton-item class="line-lf" variant="p" />
                    <el-skeleton-item class="line-rt" variant="p" />
                  </div>
                </template>
              </el-skeleton>
            </div>
          </template>
        </template>
      </recommended-product>
      <div class="more">
        <div v-if="!isground" class="more-wrap" @click="loadMore">
          <span> View More</span>
          <el-icon><ArrowDown /></el-icon>
        </div>
        <div v-else>没有更多数据啦...</div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { getProductData } from '@/api/home/index'
import Banner from './components/banner.vue'
import HotSellPlatform from './components/hotsellPlatform.vue'
import RecommendedProduct from './components/recommendedProduct.vue'
import recommendImg from '@/assets/images/recommend.png'

defineOptions({
  name: 'Home'
})

const skeletonLoading = ref(true)

// 是否加载完成所有数据
const isground = ref(false)

// bannner 数据
// hotsellplatform 数据
// Recommended 数据
const recommendList = ref([])
// 需要拼接的数据
const showAddLoading = ref(false)

// 分页
const pageData = ref({
  currentPage: 1,
  pageSize: 18,
  total: 0
})

const loadMore = () => {
  pageData.value.currentPage++
  getData('add')
}

// 获取 recommended products 数据
const getData = (type: 'init' | 'add') => {
  let postData = {
    currentPageIndex: pageData.value.currentPage,
    pageSize: pageData.value.pageSize,
    totalCount: pageData.value.total,
    keywords: '',
    country: localStorage.getItem('language')
  }
  showAddLoading.value = true
  getProductData(postData)
    .then((res) => {
      skeletonLoading.value = false
      showAddLoading.value = false
      pageData.value.currentPage = res.data.currentPageIndex
      pageData.value.pageSize = res.data.pageSize
      pageData.value.total = res.data.totalCount
      if (type === 'init') {
        recommendList.value = res.data.items
      }
      if (type === 'add') {
        recommendList.value = recommendList.value.concat(res.data.items)
      }
    })
    .catch(() => {
      skeletonLoading.value = false
      showAddLoading.value = false
    })
}

onMounted(async () => {
  getData('init')
})
</script>

<style lang="scss" scoped>
.page-banner {
  margin-top: 24px;
  width: 100%;
  height: 450px;
}
.page-hot {
  margin-top: 20px;
  height: 480px;
}
.page-recommended {
  margin-top: 20px;
  box-sizing: border-box;
  background-color: #fff;
  .header {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .header-title {
      font-size: 24px;
      display: flex;
      align-items: center;
    }
    .header-more {
      font-size: 16px;
      font-weight: bold;
      cursor: pointer;
    }
  }

  // 骨架屏
  .header-box {
    height: 40px;
    display: flex;
    justify-content: space-between;
    .line-lf {
      width: 300px;
      height: 100%;
    }
    .line-rt {
      width: 160px;
      height: 100%;
    }
  }

  .more {
    height: 40px;
    padding-bottom: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    .more-wrap {
      width: 140px;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 20px;
      cursor: pointer;
      > span {
        margin-right: 10px;
      }
    }
  }
}
</style>
